<!DOCTYPE html>
  <html lang="en">
  <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>用户列表</title>
      <link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">
	  <script src="https://unpkg.com/axios@0.20.0/dist/axios.min.js"></script>
      <script src="js/vue.js"></script>
      <script src="element-ui/lib/index.js"></script>
      <style>
        .el-header{
          background-color: #99CCFF;
        }
        .header-img{
          width: 50px;
          margin-top: 7px;
		  border-radius: 30px;
        }
      </style>
  </head>
  <body>
    <div id="div">
      <el-container>
        <!-- 头部 -->
        <el-header class="el-header">
          <el-container>
            <div>
              <el-image src="../img/timg.jpg" class="header-img" ></el-image>
            </div>
            <el-menu
              :default-active="activeIndex2"
              mode="horizontal"
              @select="handleSelect"
              background-color="#99CCFF"
              text-color="white"
              active-text-color="#ffd04b"
              style="margin-left: auto;">
              <el-menu-item index="1">处理中心</el-menu-item>
              <el-submenu index="2">
                <template slot="title">我的工作台</template>
                <el-menu-item index="2-1">选项1</el-menu-item>
                <el-menu-item index="2-2">选项2</el-menu-item>
                <el-menu-item index="2-3">选项3</el-menu-item>
              </el-submenu>
              <el-menu-item index="3"><a href="http://localhost:8888/deliver/login.html" target="_self">首页</a></el-menu-item>
            </el-menu>
          </el-container>
        </el-header>
      </el-container>
	  <el-container style="height: 580px; border: 1px solid #eee">
	      <el-aside width="200px" style="background-color: rgb(238, 241, 246)">
	          <el-menu :default-openeds="['1','2']">
				  <el-submenu index="1">
					  <template slot="title"><i class="el-icon-menu"></i>全部</template>
					  <el-menu-item-group>
						  <el-menu-item index="1-1" v-on:click="getTable(1)"><i class="el-icon-help"></i>全部发货信息</el-menu-item>
						  <el-menu-item index="1-2" v-on:click="getTable(2)"><i class="el-icon-help" ></i>全部收货信息</el-menu-item>
					  </el-menu-item-group>
				  </el-submenu>
				  <el-submenu index="2">
					  <template slot="title"><i class="el-icon-menu"></i>我的</template>
					  <el-menu-item-group>
						  <el-menu-item index="2-2" v-on:click='find_my_send()'><i class="el-icon-help"></i>我的发货信息</el-menu-item>
						  <el-menu-item index="2-3" v-on:click="find_my_accept()"><i class="el-icon-help"></i>我的收货信息</el-menu-item>
						  <el-menu-item index="2-1" v-on:click="find_my_common()"><i class="el-icon-help"></i>我的地址簿</el-menu-item>
						  <el-menu-item index="2-4" v-on:click="new_address()"><i class="el-icon-plus"></i>新建地址</el-menu-item>
					  </el-menu-item-group>
				  </el-submenu>
				  
	          </el-menu>
	      </el-aside>
	  <el-main>

		  <el-table :data="tableData" v-if="status==1">

			  <el-table-column prop="order_id" label="订单号" width="140">
			  </el-table-column>
			  <el-table-column prop="sender_id" label="发货方编号" width="120">
			  </el-table-column>
			  <el-table-column prop="sender_address" label="发货地址">
			  </el-table-column>
			  <el-table-column prop="sender_time" label="发送时间">
			  </el-table-column>
			  <el-table-column prop="order_create_time" label="订单完成时间">
			  </el-table-column>
<!--			  <el-table-column label="编辑" width="100">-->
<!--				  <el-button type="warning" icon="el-icon-star-off">编辑</el-button>-->
<!--			  </el-table-column>-->
			  <el-table-column label="删除" width="100">
				  <el-button type="danger" icon="el-icon-star-off">删除</el-button>
			  </el-table-column>
		  </el-table>

		  <el-table :data="tableData" v-else-if="status==2">
			  <div style="color: red;font-size: 20px;">收货列表</div>
			  <el-table-column prop="order_id" label="订单号" width="140">
			  </el-table-column>
			  <el-table-column prop="accept_id" label="接收方编号" width="120">
			  </el-table-column>
			  <el-table-column prop="accept_address" label="收货地址">
			  </el-table-column>
			  <el-table-column prop="order_completed_time" label="完成时间">
			  </el-table-column>
<!--			  <el-table-column-->
<!--					  label="编辑"-->
<!--					  width="100">-->
<!--				  <el-button type="warning" icon="el-icon-star-off">编辑</el-button>-->
<!--			  </el-table-column>-->
			  <el-table-column
					  label="删除"
					  width="100">
				  <el-button type="danger" icon="el-icon-star-off">删除</el-button>
			  </el-table-column>
		  </el-table>

		  <el-table :data="tableData" v-else-if="status==3" row-class-name="rowname" @row-click="rowClick">

			  <el-button type="primary">添加地址</el-button>
			  <el-table-column prop="user_id" label="用户编号" width="140"></el-table-column>
			  <el-table-column prop="user_common_name" label="姓名" width="120"></el-table-column>
			  <el-table-column prop="user_common_phone" label="手机号"></el-table-column>
			  <el-table-column prop="user_common_address" label="地址"></el-table-column>
<!--			  <el-table-column label="编辑" width="100">-->
<!--				  <el-button type="warning" icon="el-icon-star-off">编辑</el-button>-->
<!--			  </el-table-column>-->
			  <el-table-column label="删除" width="100">
				  <el-button type="danger" icon="el-icon-star-off" v-on:click='delete_common'>删除</el-button>
			  </el-table-column>
		  </el-table>

		  <el-form v-else-if="status==4" :model="addFrom" label-width="15%">
			  <!-- 用戶名 -->
			  <el-form-item label="姓名:" >
				  <el-input  v-model="addFrom.username">
				  </el-input>
			  </el-form-item>
			  <!-- 密码 -->
<!--			  <el-form-item label="密码:" prop="newphone">-->
				  <el-form-item label="手机号:" >
				  <el-input v-model="addFrom.newphone">
				  </el-input>
			  </el-form-item>
			  <el-form-item label="地址:" >
				  <el-input v-model="addFrom.newaddredd">
				  </el-input>
			  </el-form-item>
			  <!-- 按钮 -->
			  <el-form-item >
				  <el-button type="primary" round v-on:click="send_new_address()">发送</el-button>
			  </el-form-item>
		  </el-form>

	  </el-main>

	  </el-container>
	  </el-main>
	  </el-container>

	  
    </div>
  </body>
<script>
	function getParams(key) {
		var reg = new RegExp("(^|&)" + key + "=([^&]*)(&|$)");
		var r = window.location.search.substr(1).match(reg);
		if (r != null) {
			return unescape(r[2]);
		}
		return null;
	};
	const URL_IP = "http://localhost:8888"
	const URL_API_HEAD = URL_IP+"/api"
    new Vue({
        el:"#div",
        // data:{
		// 	status:0,
        //   	tableData:[],
		// 	phone:''
        // },
		data:{
			status:0,
			tableData:[],
			phone:'',
			common_phone:'',
			user_id:'',
			addFrom:{
				username:'',
				newphone:'',
				newaddredd:'',
			},
		},
		methods:{
			getTable(a){
				let _this = this
				var tablename = ['','/find_all_send_info', '/find_all_accept_info']
				// console.log(a);
				this.status = parseInt(a);
				let url = URL_API_HEAD + tablename[a]
				axios.get(url).then(res=>{
					console.log(res)
					_this.tableData = res.data
				});
				// this.find_my_common('123456')
			},
			beforeMount(){
				getParams("phone");
				this.phone = phone;
				console.log("参数param1:"+phone);//输出aa
				console.log("phone = "+ phone)
			},
			find_my_common(){
				myphone = getParams("phone");
				this.status = 3;
				let url = URL_API_HEAD+"/find_my_user_common_info"
				axios.post(url,{
					phone:myphone
				}).then(res=>{
					console.log(res)
					this.tableData = res.data
				});
			},
			find_my_accept(){
				myphone = getParams("phone");
				this.status = 2;
				let url = URL_API_HEAD+"/find_my_accept_info"
				axios.post(url,{
					phone:myphone
				}).then(res=>{
					console.log(res)
					this.tableData = res.data
				});

			},
			find_my_send(){
				myphone = getParams("phone");
				this.status = 1;
				let url = URL_API_HEAD+"/find_my_send_info"
				axios.post(url,{
					phone:myphone
				}).then(res=>{
					console.log(res)
					this.tableData = res.data
				});
			},
			select(e){console.log("select " + e)},
			activeIndex2(e){console.log("activeIndex2 " + e)},
			handleSelect(e){console.log("handleSelect " + e)},
			delete_common(){
				//需要等待点击函数事件后，才能获取到按钮
				var _this = this
				setTimeout( function(){
					console.log(_this.common_phone+" "+_this.user_id)
					let url = URL_API_HEAD+"/delete_my_user_common_info"
					axios.post(url,{
						user_id:_this.user_id,
						phone:_this.common_phone
					}).then(res=>{
						console.log(res);
						//更新
						_this.find_my_common()
					});
				}, 100 );
				// console.log(this.tableData.phone)
			},
			rowClick(row,event,column){
				console.log(row)
				this.common_phone = row.user_common_phone;
				this.user_id = row.user_id;
			},
			new_address(){
				this.status = 4;
			},
			send_new_address(){
				//需要等待点击函数事件后，才能获取到按钮
				var _this = this;
				var myphone = getParams("phone");
				var id;
				console.log(_this.addFrom.username+" "+_this.addFrom.newphone+" "+_this.addFrom.newaddredd)
				setTimeout( function(){
					axios.post(URL_API_HEAD+"/get_user_id",{
						phone:myphone
					}).then(res=>{
						console.log(res)
						id = res.data;
						axios.post(URL_API_HEAD+"/insert_my_user_common_info",{
							user_id:id,
							user_common_phone:_this.addFrom.newphone,
							user_common_name:_this.addFrom.username,
							user_common_address:_this.addFrom.newaddredd,
						}).then(res=>{
							console.log(res);
							//更新
							_this.find_my_common()
						});
					});
				}, 100 );
				// console.log(this.tableData.phone)
			},

		}
    });
</script>
  </html>